<template>
        <div class="Popup">
            <div class="close">&times;</div>
            <div class="popbc">
                <div class="column" v-if="showHead">
                    {{title}}
                    <slot name="subtitle"></slot>
                </div>

                <div v-if="showContent">
                    <slot></slot>
                </div>
            </div>
        </div>
</template>
<script>
    export default {
        name: 'Popup',
        props: {
            title: {
                type: String,
            }
        },
        data() {
            return {
                showHead: true,
                showContent: true
            };
        },
        mounted() {
            //关闭
            $(".Popup .close").click(function(){
                $(this).parent(".Popup").fadeOut(500);
                $(".pop-mask").remove();
            });
            //拖动
            var dragging = false;
            var iX, iY;
            $(".popbc .column").mousedown(function(e){
                dragging = true;
                iX = e.clientX - $(this).parent().offset().left;
                iY = e.clientY - $(this).parent().offset().top;
                $(this).parent().addClass("move-now");
                return false;
            });
            $(document).mousemove(function(e) {
                if(dragging){
                    var oX = e.clientX - iX;
                    var oY = e.clientY - iY;
                    $(".move-now").css({left:oX,top:oY});
                    return false;
                }
            });
            $(document).mouseup(function(e) {
                dragging = false;
                $(".move-now").removeClass("move-now");
             });
        }
    }
</script>
<style lang="less" scoped>
    .Popup {
        display: none;
        width: 3840px;
        height: 1971px;
        background-color: rgba(0,0,0,0.8);
        top: 189px;
        left: 0;
        position: fixed;
        z-index: 5999;
        min-width: 500px;
        min-height: 150px;
        padding: 10px 20px;
        box-shadow: 0 0 20px #333 inset;
        overflow: hidden;
        .close{
            position: absolute;
            top: 100px;
            right: 450px;
            z-index: 50;
            width: 100px;
            height: 80px;
            font-size: 100px;
            color: #fff;
            line-height: 100px;
            text-align: center;
            cursor: pointer;
        }
        &.no-close{
            &>.close{
                display: none;
            }
        }
        .popbc{
            position: absolute;
            left: 8%;
            top: 2%;
            width: 3184px;
            height: 1846px;
            background: url("./pop-bc.png");
        .column {
            position: relative;
            z-index: 40;
            height: 80px;
            font-size: 42px;
            color: #fff;
            line-height: 80px;
            text-align: left;
            padding: 0 30px;
        }

        &.no-close{
            &>.close{
                display: none;
            }
        }
    }
}

</style>
